---
slug: /plugins/autoformat
title: Autoformat
---

Allows you to apply formatting based on character sequences, such as automatically converting `# `
into an H1.

### `createAutoformatPlugin`

```ts live
() => {
  const preFormat = (editor) => unwrapList(editor);

  const optionsAutoformat = {
    rules: [
      {
        type: ELEMENT_H1,
        markup: '#',
        preFormat,
      },
      {
        type: ELEMENT_H2,
        markup: '##',
        preFormat,
      },
      {
        type: ELEMENT_H3,
        markup: '###',
        preFormat,
      },
      {
        type: ELEMENT_H4,
        markup: '####',
        preFormat,
      },
      {
        type: ELEMENT_H5,
        markup: '#####',
        preFormat,
      },
      {
        type: ELEMENT_H6,
        markup: '######',
        preFormat,
      },
      {
        type: ELEMENT_LI,
        markup: ['*', '-'],
        preFormat,
        format: (editor) => {
          if (editor.selection) {
            const parentEntry = getParent(editor, editor.selection);
            if (!parentEntry) return;
            const [node] = parentEntry;
            if (
              isElement(node) &&
              !isType(editor, node, ELEMENT_CODE_BLOCK) &&
              !isType(editor, node, ELEMENT_CODE_LINE)
            ) {
              toggleList(editor, {
                type: ELEMENT_UL,
              });
            }
          }
        },
      },
      {
        type: ELEMENT_LI,
        markup: ['1.', '1)'],
        preFormat,
        format: (editor) => {
          if (editor.selection) {
            const parentEntry = getParent(editor, editor.selection);
            if (!parentEntry) return;
            const [node] = parentEntry;
            if (
              isElement(node) &&
              !isType(editor, node, ELEMENT_CODE_BLOCK) &&
              !isType(editor, node, ELEMENT_CODE_LINE)
            ) {
              toggleList(editor, {
                type: ELEMENT_OL,
              });
            }
          }
        },
      },
      {
        type: ELEMENT_TODO_LI,
        markup: ['[]'],
      },
      {
        type: ELEMENT_BLOCKQUOTE,
        markup: ['>'],
        preFormat,
      },
      {
        type: MARK_BOLD,
        between: ['**', '**'],
        mode: 'inline',
        insertTrigger: true,
      },
      {
        type: MARK_BOLD,
        between: ['__', '__'],
        mode: 'inline',
        insertTrigger: true,
      },
      {
        type: MARK_ITALIC,
        between: ['*', '*'],
        mode: 'inline',
        insertTrigger: true,
      },
      {
        type: MARK_ITALIC,
        between: ['_', '_'],
        mode: 'inline',
        insertTrigger: true,
      },
      {
        type: MARK_CODE,
        between: ['`', '`'],
        mode: 'inline',
        insertTrigger: true,
      },
      {
        type: MARK_STRIKETHROUGH,
        between: ['~~', '~~'],
        mode: 'inline',
        insertTrigger: true,
      },
      {
        type: ELEMENT_CODE_BLOCK,
        markup: '``',
        trigger: '`',
        triggerAtBlockStart: false,
        preFormat,
        format: (editor) => {
          insertEmptyCodeBlock(editor , {
            defaultType: getPlatePluginType(editor , ELEMENT_DEFAULT),
            insertNodesOptions: { select: true },
          });
        },
      },
    ],
  };

  const plugins = [
    ...pluginsBasic,
    createListPlugin(),
    createResetNodePlugin(optionsResetBlockTypePlugin),
    createSoftBreakPlugin(optionsSoftBreakPlugin),
    createExitBreakPlugin(optionsExitBreakPlugin),
    createAutoformatPlugin(optionsAutoformat),
  ];

  return (
    <Plate
      id="autoformat"
      plugins={plugins}
      components={components}
      options={options}
      editableProps={editableProps}
      initialValue={initialValueAutoformat}
    />
  );
}
```
